<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">

<head>
    <title>登录</title>
    <%@include file="../common/common.jsp"%>

</head>

<body>

<!-- signin end -->
<section class="signin">
    <div class="container">

        <div class="sign-content">
            <h2>欢迎登录</h2>
            <form >
            <div class="row">
                <div class="col-sm-12">
                    <div class="signin-form">
                        <form  id="user-from">
                            <div class="form-group">
                                <label for="userEmail">邮箱：</label>
                                <input type="email" class="form-control" id="userEmail" name="userEmail" placeholder="">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label for="userPassword">密码：</label>
                                <input type="password" class="form-control" id="userPassword" name="userPassword" placeholder="">
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-sm-12">
                    <div class="signin-footer">
                        <button type="button" id="btnUserLogin" class="btn signin_btn" >
                            登录
                        </button>
                    </div>
                    <p class="text-center">
                        没有账号？
                        <a href="<%=path%>/register" target="_blank">注册</a>
                    </p>
                </div>
            </div>
            </form>
        </div>
    </div>

</section>
<script type="text/javascript">
    $("#btnUserLogin").click(function () {
        $.ajax({
            type: "post",
            url: CONTEXT_PATH+"/Consumer/userLogin",
            //data: $("#user-from").serialize(), // 序列化form表单里面的数据传到后台
            data:{
              "userEmail"  : $("#userEmail").val(), "userPassword"  : $("#userPassword").val(),
            },
            dataType: "json", // 指定后台传过来的数据是json格式
            success: function(data){
                if(data.code===200){
                    window.location.replace(CONTEXT_PATH+"/user/center");
                }else {
                    swal("提示！","邮箱或者密码错误！","error")
                }
            },
            error: function(err){
                swal("提示","发生错误！","error")
            }
        });
    });
</script>
<style>
    [placeholder]:focus::-webkit-input-placeholder {
        -webkit-transition: opacity 0.3s 0.3s ease;
        -moz-transition: opacity 0.3s 0.3s ease;
        -ms-transition: opacity 0.3s 0.3s ease;
        -o-transition: opacity 0.3s 0.3s ease;
        transition: opacity 0.3s 0.3s ease;
        opacity: 0;
    }


    .sign-content {
        max-width: 620px;
        margin: 0 auto;
    }

    .sign-content h2 {
        color: #464d5f;
        font-size: 36px;
        text-align: center;
    }

    /*.signin-form  .form-control*/
    .signin-form .form-control {
        background: transparent;
        border: transparent;
        border: 1px solid #c3c6cf;
        border-radius: 3px;
        outline: 0 !important;
        box-shadow: none;
        padding: 0px 0;
        height: 46px;
        -webkit-transition: linear .5s;
        -moz-transition: linear .5s;
        -ms-transition: linear .5s;
        -o-transition: linear .5s;
        transition: linear .5s;
    }


    .signin-form label {
        color: #7c8089;
        font-size: 16px;
        font-weight: 500;
        text-transform: none;
        margin-bottom: 15px;
    }

    .signin-form input[type="text"],
    .signin-form input[type="email"],
    .signin-form input[type="password"] {
        color: #464e60;
        font-size: 16px;
        font-weight: 400;
        text-transform: none;
        padding: 0 18px;
    }

    .signin-form .form-col {
        width: 48.5%;
        float: left;

    }

    .signin-form .form-col1 {
        width: 48%;
        float: right;
    }

    .btn.signin_btn,
    .btn.signin_btn:focus {
        width: 620px;
        padding: 0;
        height: 60px;
        background: #5a84fd;
        color: #fff;
        font-size: 14px;
        text-transform: none;
        border-radius: 3px;
        box-shadow: 0 5px 30px rgba(0, 66, 255, .3);
        margin-top: 23px;
    }
</style>
</body>

</html>
